<template>
  <div class="bbase">
    <div class="base">
      <div class="product-base-container">
        <div class="product-container" v-for="product,index in productList">
          <div class="product-container-tag" v-bind:style="{background:product.color}">
            <svg class="icon" style="font-size: 30px;">
              <use v-bind:xlink:href='[product.icon]'></use>
            </svg>
          </div>
          <div style="text-align: center;color: #42578E">
            <div class="product-name" style="display: inline-flex;line-height: 23px;margin-top: 8px"
                 v-bind:style="{color:product.color}">
              <div style="height: 20px;width: 3px;margin-top: 0px;margin-right: 4px"
                   v-bind:style="{background:product.color}"></div>
              <span style="font-weight: bold">{{product.name}}</span>
            </div>
            <div style="font-size: 14px">{{product.feature}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    props: ['productList'],
    name: 'HelloWorld',
    data () {
      return {
        msg: 'Welcome to Your Vue.js App'
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .product-base-container {
    display: flex;
    flex-direction: row;
    width: 100%;
    padding: 10px 0px;
  }

  .bbase{
    background: white;
  }
  .base:last-child {
    margin-right: 5%;
  }

  .product-container {
    display: flex;
    flex: 1;
    flex-direction: column;
    border-radius: 8px;
    border-style: solid;
    border-width: 1px;
    border-color: #ECECEC;
    margin-left: 5%;
    text-align: center;
    overflow: hidden;
  }

  .product-container-tag {
    text-align: center;
    flex: 1;
    padding: 5px;
    line-height: 20px;
  }

  .product-name {
    color: red;
  }

  .product-name-before {
    background: #b2b2b2;
    width: 30px;
    height: .5px;
  }


</style>
